<template>
	<view class="">
		<u-navbar :fixed="fixed" :title="title&&handleLang(title)" :bgColor="bgColor" :placeholder="placeholder"
			:leftIconColor="leftIconColor" :border="false" :titleStyle='newTitleStyle'
			:leftIcon="autoBack?'arrow-left':''">
			<!-- logo类型 -->
			<view slot="left" class="flex" v-if="navType=='logo'&&!slotKeys.left">
				<image src="/static/icon/logo.png" mode="widthFix" style="width: 42rpx;height: 42rpx;"></image>
				<text class="font-size-16 font-color-black font-w-500 ml-10">{{handleLang('lvBox')}}</text>
			</view>
			<view slot='left' v-if="slotKeys.left">
				<slot name="left"></slot>
			</view>
			<w-icon :name="leftIcon" :size="leftIconSize" slot='left' v-if="!slotKeys.left&&navType!='logo'&&autoBack"
				@click='backPage'>

			</w-icon>

			<view slot='right' v-if="slotKeys.right">
				<slot name="right"></slot>
			</view>


			<view slot='center' v-if="slotKeys.center">
				<slot name="center"></slot>
			</view>
			
			<template #center v-if="title && product&&product.main_image">
				<view class="flex flex-ai-center" style="width: 70%;">
					<w-image :src="product.main_image" width="34" height="34" radius="5"></w-image>
					<view class="font-color-white font-w-500 text-overflow ml-8">{{ title }}</view>
				</view>
			</template>
			<!-- <slot slot='center' name="center" v-if="slotKeys.center"></slot> -->

			<!-- login类型 -->
			<!-- <view slot="right" v-if="navType=='login'&&!slotKeys.right" class="font-size-14 font-color-textPrimary"
				@click="$emit('click')">{{handleLang('跳过')}}</view> -->
				<view slot="left" v-if="navType=='login'&&!slotKeys.right" class="font-size-14 font-color-textPrimary"@click="$emit('click')">
					<w-icon name="arrow-left" color="#000" size="24"></w-icon>
				</view> 
			<!-- 收货地址类型 -->
			<view slot="right" v-if="navType=='address'&&!slotKeys.right" class="font-size-12 font-color-textPrimary"
				@click="$emit('click')">{{handleLang('+新增')}}</view>
			<!-- 合成活动类型 -->
			<view slot="right" v-if="navType=='compound'&&!slotKeys.right" class="font-size-12 font-w-500" style="color: #222;"
				@click="$emit('click')">{{handleLang('活动记录')}}</view>

			<!-- 藏品 -->
			<view slot="right" v-if="navType=='goods'&&!slotKeys.right" class="flex flex-ai-center">
				<w-icon class='mr-16' v-if="product.id" :name="product.is_like? 'has-like':opacity<1?'no-like-new':'no-like-new'" size="32"
					@click='targetLike'></w-icon>
				<w-icon :name="opacity < 1?'share':'share'" size="32" @click='showShareFn'></w-icon>
			</view>

			<!-- 二级 -->
			<view slot="right" v-if="navType=='marketGoods'&&!slotKeys.right" class="flex flex-ai-center">
				<w-icon  :name="product.is_like? 'has-like':opacity<1?'no-like-black':'no-like-black'" size="24" @click='targetLike'></w-icon>
			</view>



		</u-navbar>
		<w-product-share v-model='showShare' :product="product"></w-product-share>
	</view>
</template>

<script>
	import {
		isCollect
	} from '@/api/collection/index.js'
	export default {
		name: "w-navbar",
		props: {
			fixed: {
				type: Boolean,
				default: true
			},
			bgColor: {
				type: String,
				default: 'transparent'
			},
			leftIcon: {
				type: String,
				default: 'back-btn'
			},
			leftIconSize:{
				type: [String,Number],
				default: '24'
			},
			leftIconColor: { // 左侧返回图标的颜色
				type: String,
				default: '#fff'
			},
			placeholder: { // 生成一个等高元素，以防止塌陷
				type: Boolean,
				default: true
			},
			navType: {
				type: String | Number,
				default: 'default'
			},
			// 导航栏标题
			title: {
				type: String,
				default: ''
			},
			// 导航栏标题样式
			titleStyle: {
				type: Object,
			},
			product: {
				type: Object,
				default () {
					return {

					}
				}
			},
			opacity:{
				type:[String,Number],
				default:0
			}
		},
		computed: {
			autoBack() {
				let arry = ['default', 'address', 'compound', 'goods', 'marketGoods'];
				return arry.includes(this.navType)
			},
			slotKeys() {
				let slots = {}
				for (let k in this.$slots) {
					slots[k] = true
				}
				return slots
			},
			newTitleStyle() {
				let Style = {
					'font-size': '34rpx',
					'font-weight': 500,
					'color': '#222'
				}
				for (let k in this.titleStyle) {
					Style[k] = this.titleStyle[k]
				}
				return Style
			}
		},
		data() {
			return {
				showShare: false,
			};
		},
		mounted() {

		},
		methods: {
			//切换收藏状态
			targetLike() {
				if (!this.isLogin) {
					return uni.$emit('showLogin')
				}
				let type = this.product.is_like > 0 ? 0 : 1
				isCollect(this.product.is_like, {
					types: this.product.goods_type,
					id: this.product.id
				}).then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
					this.product.is_like = type;
					this.$emit('likeChange', type)
				})

			},
			showShareFn(e) {
				if (!this.isLogin) {
					return uni.$emit('showLogin')
				}
				this.showShare = true;
			}

		}
	}
</script>





<style lang="scss" scoped>

</style>